{% extends 'admin/base.html' %}
{% block title %}运行爬虫{% endblock %}
{% block content %}
    <div class="stats shadow w-full">
        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721797308575" class="icon h-8 w-8" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4644">
                    <path d="M512 924c-55.6 0-109.6-10.9-160.4-32.4-49.1-20.8-93.1-50.5-131-88.3-37.8-37.8-67.5-81.9-88.3-131C110.9 621.6 100 567.6 100 512s10.9-109.6 32.4-160.4c20.8-49.1 50.5-93.1 88.3-131 37.8-37.8 81.9-67.5 131-88.3C402.4 110.9 456.4 100 512 100c75.8 0 150 20.8 214.4 60.1 11.8 7.2 15.5 22.6 8.3 34.4-7.2 11.8-22.6 15.5-34.4 8.3C643.8 168.2 578.6 150 512 150c-199.6 0-362 162.4-362 362s162.4 362 362 362 362-162.4 362-362c0-11.6-0.6-23.3-1.7-34.8-1.3-13.7 8.8-26 22.5-27.3 13.7-1.3 26 8.8 27.3 22.5 1.2 13.1 1.9 26.4 1.9 39.6 0 55.6-10.9 109.6-32.4 160.4-20.8 49.1-50.5 93.1-88.3 131-37.8 37.8-81.9 67.5-131 88.3C621.6 913.1 567.6 924 512 924z"
                          p-id="4645" fill="#1296db"></path>
                    <path d="M696.4 512.5H508.3c-13.8 0-25 11.3-25 25s11.2 25 25 25h188.1c13.8 0 25-11.3 25-25s-11.2-25-25-25z"
                          p-id="4646" fill="#1296db"></path>
                    <path d="M508.3 313c-13.8 0-25 11.3-25 25v199.5c0 13.8 11.3 25 25 25s25-11.3 25-25V338c0-13.7-11.2-25-25-25zM865.7 258.9l-42.4-137.7c-7.2-23.4-37.9-28.8-52.6-9.3L669 246.4c-14.8 19.5-1.2 47.5 23.3 48.1l144.1 3.2c20.4 0.5 35.3-19.2 29.3-38.8zM510 798.3c-13.8 0-25 11.3-25 25v11.5c0 13.8 11.3 25 25 25s25-11.3 25-25v-11.5c0-13.8-11.2-25-25-25zM509 167.3c-13.8 0-25 11.3-25 25v11.5c0 13.8 11.3 25 25 25s25-11.3 25-25v-11.5c0-13.8-11.2-25-25-25zM205.3 515.5h-11.5c-13.8 0-25 11.3-25 25s11.3 25 25 25h11.5c13.8 0 25-11.3 25-25s-11.3-25-25-25zM828.3 515.5h-12.5c-13.8 0-25 11.3-25 25s11.3 25 25 25h12.5c13.8 0 25-11.3 25-25s-11.3-25-25-25z"
                          p-id="4647" fill="#1296db"></path>
                </svg>
            </div>
            <div class="stat-title">上次运行时间</div>
            <div class="stat-value text-2xl">{{ spider_run_info.run_time | default("未运行") }}</div>
        </div>

        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721808880046" class="icon h-8 w-8" viewBox="0 0 1025 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="11114">
                    <path d="M409.6 204.8c11.776 0 23.4496 0.512 35.0208 1.4336l46.8992 4.096L491.4176 563.2 819.2 563.0976v51.2a409.9072 409.9072 0 0 1-388.5056 409.1904L409.6 1024a409.6 409.6 0 1 1 0-819.2z m-20.5824 103.1168l-15.2576 1.3312A307.2 307.2 0 0 0 102.4 614.4c0 169.6768 137.5232 307.2 305.8688 307.2l18.2272-0.4096a307.2 307.2 0 0 0 285.696-253.6448l0.2048-2.1504L389.12 665.6 389.12 307.9168zM665.6 30.72a358.7072 358.7072 0 0 1 357.888 338.944l2.048 70.656H614.4v-409.6zM716.8 138.3424v199.4752h199.4752l-2.7648-12.9024a256.4096 256.4096 0 0 0-182.3744-183.296L716.8 138.24z"
                          fill="#1296db" p-id="11115"></path>
                </svg>
            </div>
            <div class="stat-title">当前数据量</div>
            <div class="stat-value text-2xl" id="num_count">{{ movie_count }}</div>
        </div>

        <div class="stat">
            <div class="stat-figure text-secondary">
                <svg t="1721797379472" class="icon h-8 w-8" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5683">
                    <path d="M512 148.5c49.1 0 96.7 9.6 141.5 28.5 43.3 18.3 82.2 44.5 115.6 77.9 33.4 33.4 59.6 72.3 77.9 115.6 18.9 44.8 28.5 92.4 28.5 141.5s-9.6 96.7-28.5 141.5c-18.3 43.3-44.5 82.2-77.9 115.6-33.4 33.4-72.3 59.6-115.6 77.9-44.8 18.9-92.4 28.5-141.5 28.5s-96.7-9.6-141.5-28.5c-43.3-18.3-82.2-44.5-115.6-77.9-33.4-33.4-59.6-72.3-77.9-115.6-18.9-44.8-28.5-92.4-28.5-141.5s9.6-96.7 28.5-141.5c18.3-43.3 44.5-82.2 77.9-115.6s72.3-59.6 115.6-77.9c44.8-18.9 92.4-28.5 141.5-28.5m0-50C283.6 98.5 98.5 283.6 98.5 512S283.6 925.5 512 925.5 925.5 740.4 925.5 512 740.4 98.5 512 98.5z"
                          p-id="5684" fill="#1296db"></path>
                    <path d="M512 401m-106 0a106 106 0 1 0 212 0 106 106 0 1 0-212 0Z" p-id="5685"
                          fill="#1296db"></path>
                    <path d="M514.5 540.8c-105.1 0-195 68.8-231.6 166.2 28.2 27.9 60.4 50.1 95.9 65.9 40.2 18 83 27.1 127.1 27.1s86.9-9.1 127.1-27.1c38.9-17.4 73.8-42.3 103.8-74.1 1.4-1.5 2.7-3 4.1-4.4-39.2-90.6-125.8-153.6-226.4-153.6z"
                          p-id="5686" fill="#1296db"></path>
                </svg>
            </div>
            <div class="stat-title">上次运行用户</div>
            <div class="stat-value text-2xl">{{ spider_run_info.run_user | default("未运行") }}</div>
        </div>
    </div>
    <progress class="progress progress-info w-full" max="100" id="spider_progress"></progress>

    <div class="flex justify-between items-center">
        <div class="text-2xl font-bold">运行进度<span class="badge badge-lg" id="spider_schedule">0%</span></div>
        <div>
            <div class="tooltip" data-tip="运行爬虫">
                <button class="btn btn-sm btn-info text-white" id="spider_run">
                    <svg t="1721800794860" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="9008">
                        <path d="M264.3 141.6l275.4 179.3 284 184.8c1 0.6 3.6 2.4 3.6 6.7 0 4.3-2.6 6.1-3.6 6.7L539.8 704 264.3 883.3c-0.2-1-0.3-2.1-0.3-3.5V145.1c0-1.3 0.2-2.5 0.3-3.5M262 66.2c-36.5 0-70 32.9-70 78.9v734.6c0 46 33.5 78.9 70 78.9 11.6 0 23.6-3.3 34.8-10.7L579 764.2l284-184.8c48.5-31.6 48.5-102.5 0-134.1L579 260.5 296.9 76.9c-11.3-7.3-23.2-10.7-34.9-10.7z"
                              fill="#fff" p-id="9009"></path>
                    </svg>
                    <span class="hidden md:block">运行爬虫</span>
                </button>
            </div>
            <div class="tooltip" data-tip="清空数据库">
                <button class="btn btn-sm btn-error text-white" id="spider_empty">
                    <svg t="1721800977296" class="icon h-5 w-5" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10061">
                        <path d="M274.56 798.997333l19.434667-25.130666-33.792 68.565333a18.133333 18.133333 0 0 0 11.562666 25.536l59.733334 16a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.818667 35.626667-35.989333 45.290666-48.469333l19.456-25.130667-33.813333 68.565333a18.133333 18.133333 0 0 0 11.562667 25.536l84.48 22.634667a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-35.989333 45.269333-48.469333l19.456-25.130667-33.813333 68.565333A18.133333 18.133333 0 0 0 535.530667 938.666667l72.106666 19.328a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-36.010667 45.269334-48.490667l19.456-25.130667-33.813334 68.586667a18.133333 18.133333 0 0 0 11.584 25.514667l86.421334 23.338666 3.84-0.213333c13.269333-0.704 29.056-5.034667 43.84-12.8 29.781333-15.701333 48.170667-43.2 52.181333-78.250667 2.133333-18.517333 4.778667-38.549333 8.405333-63.530666 1.642667-11.221333 2.944-20.010667 6.229334-41.834667 11.050667-73.322667 14.634667-101.034667 17.130666-133.674667l0.938667-12.373333 2.837333-2.922667 12.330667-1.344a41.813333 41.813333 0 0 0 24.810667-11.221333c10.730667-10.24 14.805333-25.386667 11.093333-42.197333l-37.546667-171.584c-3.029333-13.696-11.264-27.946667-23.146666-39.829334-11.648-11.626667-25.92-20.138667-39.893334-23.893333L723.626667 331.306667l-2.261334-3.925334L774.250667 130.133333c8.32-31.061333-11.754667-63.744-44.970667-72.64l-79.509333-21.312c-33.194667-8.896-66.922667 9.365333-75.264 40.426667l-52.842667 197.269333-3.925333 2.261334-118.101334-31.637334c-13.994667-3.754667-30.634667-3.498667-46.506666 0.746667-16.256 4.352-30.506667 12.586667-39.957334 22.933333l-118.314666 129.792c-11.605333 12.714667-15.658667 27.84-11.52 42.090667 4.16 14.229333 15.850667 25.194667 32.896 30.528l13.610666 4.266667 2.133334 3.882666-3.626667 13.802667c-21.12 79.850667-52.885333 136.917333-85.717333 150.890667-47.530667 20.202667-72.938667 49.429333-78.421334 85.034666-5.034667 32.682667 9.28 67.114667 37.589334 91.541334l22.037333 8.341333 74.666667 20.010667a42.666667 42.666667 0 0 0 41.216-11.050667c15.274667-15.274667 26.88-28.032 34.837333-38.293333z m551.381333-396.565333c14.144 3.797333 29.952 19.2 32.768 32l34.56 157.781333a10.666667 10.666667 0 0 1-13.184 12.586667L240.64 433.493333a10.666667 10.666667 0 0 1-5.12-17.493333l108.8-119.36c8.832-9.685333 30.229333-15.146667 44.373333-11.349333l141.333334 37.866666a21.333333 21.333333 0 0 0 26.133333-15.082666l58.304-217.642667a21.333333 21.333333 0 0 1 26.133333-15.082667l77.056 20.650667a21.333333 21.333333 0 0 1 15.082667 26.133333l-58.325333 217.642667a21.333333 21.333333 0 0 0 15.082666 26.112l136.448 36.565333zM315.456 701.568c-33.664 45.141333-64.597333 79.082667-92.8 101.802667l-5.909333 4.778666-2.837334 0.597334-88.106666-24.106667-2.922667-3.2c-13.034667-14.165333-19.370667-31.04-16.981333-46.592 3.285333-21.333333 22.058667-39.338667 53.205333-52.586667 31.722667-13.482667 59.818667-47.104 82.922667-99.904 10.026667-22.954667 18.88-48.725333 26.389333-76.586666l3.882667-14.4 3.904-2.261334 566.165333 151.701334 2.346667 3.306666-0.789334 12.224c-1.984 30.592-30.336 229.397333-32.128 244.906667-2.346667 20.416-11.306667 34.986667-27.605333 44.394667a73.237333 73.237333 0 0 1-21.397333 8.106666l-5.013334 0.725334-60.373333-16.170667 11.242667-20.288c8.277333-14.976 22.656-43.84 43.093333-86.613333a21.12 21.12 0 0 0-9.962667-28.16l-3.136-1.493334a21.333333 21.333333 0 0 0-26.261333 6.485334c-33.642667 45.056-64.533333 78.912-92.672 101.546666l-5.909333 4.757334-2.837334 0.597333-52.544-14.08 11.114667-20.266667c3.562667-6.485333 7.04-13.013333 10.453333-19.626666 7.04-13.504 17.898667-35.797333 32.597334-66.816a21.290667 21.290667 0 0 0-9.984-28.309334l-3.029334-1.450666a21.333333 21.333333 0 0 0-26.368 6.442666c-33.6 45.013333-64.469333 78.826667-92.608 101.482667l-5.909333 4.757333-2.837333 0.597334-52.138667-13.973334 11.114667-20.266666c3.242667-5.888 6.72-12.416 10.453333-19.626667 6.997333-13.461333 17.962667-35.946667 32.896-67.434667a20.970667 20.970667 0 0 0-10.112-28.010666l-3.328-1.536a21.333333 21.333333 0 0 0-26.069333 6.613333c-33.642667 45.056-64.554667 78.976-92.778667 101.696l-5.909333 4.757333-2.837334 0.597334-32.64-8.746667 11.093334-20.245333c3.541333-6.506667 7.04-13.034667 10.453333-19.626667 6.976-13.482667 17.941333-35.968 32.874667-67.456a21.056 21.056 0 0 0-10.069334-28.074667l-3.242666-1.514666a21.333333 21.333333 0 0 0-26.154667 6.549333z"
                              fill="#ffffff" p-id="10062"></path>
                    </svg>
                    <span class="hidden md:block">清空数据库</span>
                </button>
            </div>
        </div>

    </div>
    <div class="max-h-96 overflow-y-scroll grid grid-cols-1 divide-y divide-dashed text-center text-2xl" id="logs">
    </div>
{% endblock %}

{% block js %}
    <script>
        function spiderRunDisable() {
            spider_run.disabled = true;
        }

        function spiderRunEnable() {
            spider_run.disabled = false;
        }

        let spider_empty = document.getElementById('spider_empty');
        let spider_run = document.getElementById('spider_run');
        spider_empty.addEventListener('click', function () {
            fetch('{{ url_for('admin.spider_empty') }}')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        successToast(data.msg)
                    } else {
                        errorToast(data.msg)
                    }

                })
        })

        spider_run.addEventListener('click', function () {
            fetch('{{ url_for('admin.spider_run') }}')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        spiderRunDisable()
                        displayLogs();
                        successToast(data.msg)
                    } else {
                        spiderRunEnable()
                        errorToast(data.msg)
                    }

                })
        });

        function displayLogs() {
            const source = new EventSource(`/admin/stream`);
            let spider_schedule = document.getElementById('spider_schedule');
            let num_count = document.getElementById('num_count');
            let spider_progress = document.getElementById('spider_progress');
            source.onmessage = function (event) {
                if (event.data === '') {
                    return;
                }
                spiderRunDisable()
                let event_data = event.data.replace(/'/g, '"');
                let data = JSON.parse(event_data);
                let logs = document.getElementById('logs');
                let div_new = document.createElement('div');
                div_new.textContent = data.message;
                div_new.classList.add('p-2');
                logs.prepend(div_new);
                spider_schedule.innerText = `${data.schedule}%`;
                spider_progress.value = data.schedule;
                num_count.innerText = data.num_count;
                if (data.status === 200) {
                    successToast("爬虫运行完成")
                    spiderRunEnable()
                }
            };
            source.onerror = function (error) {
                if (error.readyState === EventSource.CLOSED) {
                    // 如果连接关闭且是因为任务完成，则显示成功消息
                    let logs = document.getElementById('logs');
                    let div_new = document.createElement('div');
                    div_new.textContent = '爬虫运行完成';
                    div_new.classList.add('p-2');
                    logs.prepend(div_new);
                    successToast("爬虫运行完成0")
                    spiderRunEnable()
                }
            };
            window.addEventListener('beforeunload', function () {
                source.close();
            })
        }

        onload_list.push(displayLogs)
    </script>
{% endblock %}